<!-- 产品废弃 -->
<template>
  <div class="material-acquisition">
    <div class="go-home" @click="goHome">
      <el-button size="small" type="primary">返回导航页面</el-button>
    </div>

    <!-- 头部标题 -->
    <div class="step-title">Step7: 产品废弃 - {{ processName }}</div>

    <!-- 主要内容区域 -->
    <div class="content-container">
      <!-- 第一行表格：材料信息 -->
      <div class="row1">
        <div class="add-button">
          <el-button type="primary" @click="addNewInput" :icon="Plus">
            新建废弃
          </el-button>
        </div>
        <el-tabs
          v-model="activeTab"
          editable
          type="card"
          @tab-remove="removeTab"
          @tab-click="handleTabClick"
        >
          <el-tab-pane
            v-for="(input, index) in inputs"
            :key="index"
            :label="input.name || `使用${index + 1}`"
            :name="String(index)"
          >
            <el-row :gutter="10" style="border-bottom: 2px solid #e4e4e4">
              <el-col :span="19">
                <el-form
                  :ref="(el) => (formRefs[index] = el)"
                  :model="input"
                  :rules="rules"
                  label-position="top"
                  label-width="180px"
                  class="form-content"
                >
                  <el-row :gutter="10">
                    <el-col :span="8">
                      <el-form-item label="使用名称" prop="name">
                        <el-input
                          v-model="input.name"
                          placeholder="请使用名称"
                        /> </el-form-item
                    ></el-col>
                    <el-col :span="8">
                      <el-form-item label="碳排放因子类别" prop="emissionType">
                        <el-select
                          v-model="input.emissionType"
                          placeholder="请选择"
                        >
                          <el-option label="自定义" value="custom" />
                          <el-option label="预设" value="preset" />
                          <el-option label="数据库" value="database" />
                        </el-select> </el-form-item
                    ></el-col>
                    <el-col :span="8">
                      <el-form-item label="影响因子名称" prop="factorName">
                        <el-input
                          v-model="input.factorName"
                          placeholder="请输入影响因子名称"
                        /> </el-form-item
                    ></el-col>

                    <!-- 第二行 -->
                    <el-col :span="8">
                      <el-form-item label="因子数值" prop="factorValue">
                        <el-input-number
                          v-model="input.factorValue"
                          style="width: 100%"
                          :min="0"
                          :precision="8"
                        /> </el-form-item
                    ></el-col>
                    <el-col :span="8">
                      <el-form-item label="单位" prop="unit">
                        <el-select v-model="input.unit" placeholder="单位">
                          <el-option
                            label="kgCO2e/pieces"
                            value="kgCO2e/pieces"
                          />
                          <el-option label="kgCO2e/kg" value="kgCO2e/kg" />
                          <el-option label="kgCO2e/m³" value="kgCO2e/m³" />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="数据来源" prop="dataSource">
                        <el-input
                          v-model="input.dataSource"
                          placeholder="企业自制"
                        /> </el-form-item
                    ></el-col>

                    <!-- 第三行 -->
                    <el-col :span="8">
                      <el-form-item
                        label="消耗量（数据收集期间总量）"
                        prop="consumption"
                      >
                        <el-input-number
                          style="width: 100%"
                          v-model="input.consumption"
                          :min="0"
                          :precision="2"
                        /> </el-form-item
                    ></el-col>
                    <el-col :span="8">
                      <el-form-item label=" *" prop="consumptionUnit">
                        <el-input
                          v-model="input.consumptionUnit"
                          placeholder="kg"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="数据质量">
                        <el-icon
                          size="22"
                          style="cursor: pointer"
                          @click="handleShowQuality"
                          ><Document
                        /></el-icon> </el-form-item
                    ></el-col>
                  </el-row>
                </el-form>
              </el-col>
              <el-col :span="5">
                <div class="carbon-card" :style="{ '--theme': theme }">
                  <div class="card-content">
                    <div class="title">排放总量</div>
                    <div class="emission-value">
                      <span class="num">0</span> kgCO₂e
                    </div>
                  </div>
                  <div class="document-icon">
                    <svg viewBox="0 0 24 24" width="20" height="20">
                      <path
                        fill="#FFFFFF"
                        d="M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2ZM16 18H8V16H16V18ZM16 14H8V12H16V14ZM13 9V3.5L18.5 9H13Z"
                      />
                    </svg>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>

        <div class="bottom-btn">
          <el-button type="primary">返回列表</el-button>
          <el-button type="primary">保存</el-button>
        </div>
      </div>
    </div>
    <!-- 碳排因子弹窗 -->
    <el-dialog
      v-model="emissionVisible"
      title="排放因子选择"
      width="80%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      custom-class="emission-factor-dialog"
    >
      <div class="filter-section">
        <el-row :gutter="16">
          <el-col :span="6">
            <el-select
              v-model="emissionFactorType"
              placeholder="请选择排放因子类别"
              @change="handleEmissionChange"
            >
              <el-option
                v-for="type in emissionFactorTypes"
                :key="type.value"
                :label="type.label"
                :value="type.value"
              />
            </el-select>
          </el-col>
          <el-col :span="1">
            <el-icon size="18"><WarningFilled /></el-icon>
          </el-col>
          <el-col :span="6">
            <el-select v-model="selectedFactor" placeholder="常用因子快捷选择">
              <el-option
                v-for="factor in filteredFactors"
                :key="factor.value"
                :label="factor.label"
                :value="factor.value"
              />
            </el-select>
          </el-col>

          <el-col :span="6">
            <el-input
              v-model="keyword"
              placeholder="请输入关键字搜索"
              clearable
            >
            </el-input>
          </el-col>

          <el-col :span="4">
            <el-switch v-model="showCollected" active-text="查看收藏因子" />
          </el-col>
        </el-row>
      </div>

      <el-table
        :data="filteredFactors"
        style="width: 100%; margin-top: 16px"
        border
        stripe
        :preserve-expanded-content="true"
        :row-class-name="tableRowClassName"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50" />
        <el-table-column type="expand">
          <template #default="props">
            <div class="describe" style="padding: 5px 15px">
              <p>产品描述：</p>
              <label>{{ props.row.productDescribe }}</label>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="排放因子" prop="factor" width="180">
          <template #default="{ row }">
            <span>{{ row.factor }}</span>
            <el-icon class="star-icon" v-if="row.collected"
              ><WarningFilled
            /></el-icon>
            <el-icon class="star-icon" v-else><WarningFilled /></el-icon>
          </template>
        </el-table-column>

        <el-table-column label="单位" prop="unit" width="120" />

        <el-table-column
          label="产品名称"
          prop="productName"
          show-overflow-tooltip
        />

        <el-table-column
          label="活动名称"
          prop="activityName"
          show-overflow-tooltip
        />

        <el-table-column
          label="活动类型"
          prop="activityType"
          show-overflow-tooltip
        />
      </el-table>

      <div
        class="pagination"
        style="display: flex; justify-content: flex-end; margin-top: 10px"
      >
        <el-pagination
          background
          size="small"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <template #footer>
        <div class="footer">
          <el-button @click="emissionVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmSelection">保存</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 数据质量检测弹窗 -->
    <el-dialog
      title="数据质量"
      v-model="qualityDialog.visible"
      width="75%"
      class="cus-dialog"
    >
      <el-table :data="evaluationItems" border style="width: 100%">
        <el-table-column prop="category" label="评估类别" width="180" />
        <el-table-column label="评分选项">
          <template #default="{ row }">
            <el-radio-group
              v-model="selectedScores[row.category]"
              text-color="#1cd1a1"
              fill="rgb(239, 240, 253)"
            >
              <div
                v-for="option in row.options"
                :key="option.score"
                class="option-item"
              >
                <el-radio :label="option.score">
                  <span class="score">{{ option.score }}分</span>
                  <span class="option-text">{{ option.label }}</span>
                </el-radio>
              </div>
            </el-radio-group>
          </template>
        </el-table-column>
      </el-table>

      <div class="result-display" v-if="Object.keys(selectedScores).length > 0">
        <h4>当前选择结果：</h4>
        <ul>
          <li v-for="(score, category) in selectedScores" :key="category">
            {{ category }}: {{ score }}分
          </li>
        </ul>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="qualityDialog.visible = false">
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import { ref, computed, reactive } from "vue";
  import { WarningFilled, Plus } from "@element-plus/icons-vue";
  import { ElMessage, ElMessageBox } from "element-plus";
  import useCarbonStorage from "@/store/modules/carbon";
  import useSettingsStore from "@/store/modules/settings";

  const settingsStore = useSettingsStore();
  const carbonStore = useCarbonStorage();

  const qualityDialog = reactive({
    visible: false,
  });
  const activeOutTab = ref("0");

  const emissionFactorTypes = ref([
    { value: "数据库", label: "数据库" },
    { value: "自定义", label: "自定义" },
    { value: "子产品", label: "子产品" },
    { value: "忽略", label: "忽略" },
  ]);
  const emissionVisible = ref(false);
  const dataFilter = ref("");
  const commonFilter = ref("");
  const keyword = ref("");
  const showCollected = ref(false);
  const currentPage = ref(1);
  const pageSize = ref(10);
  // 存储选择的分数
  const selectedScores = ref({});
  const emit = defineEmits(["changeModel", "goNav"]);
  // 模拟因子库数据 - 实际应用中应该从后端API获取
  const allFactors = ref([
    {
      id: 1,
      factor: 2.83725208,
      unit: "kgCO2e/kg",
      productName: "机械处理残留物、笔记本电脑的处理",
      activityName: "机械处理残留物、笔记本电脑的处理",
      activityType: "普通转化活动",
      productDescribe:
        '"此产品代表以千瓦时（kWh）计量的电能。如果从电力市场获取电力，则包括传输基础设施、特定国家的损耗以及变压损失（适用于中低压电力市场）。涵盖24千伏以上的电压。^^This product represents electrical energy measured in kWh. If electricity is taken from a market for electricity, the transmission infrastructure, country-specific losses and transformation losses (for markets for medium and low voltage) are included. Covers voltages above 24 kV."',
      collected: true,
    },
    {
      id: 2,
      factor: 7.50880695,
      unit: "kgCO2e/kg",
      productName: "亚磷酸三(2,4-二叔丁基苯基)酯市场",
      activityName: "亚磷酸三(2,4-二叔丁基苯基)酯市场",
      activityType: "市场活动",
      collected: false,
    },
    {
      id: 3,
      factor: 0.25629578,
      unit: "kgCO2e/kWh",
      productName: "电力、高压，AT进口",
      activityName: "电力、高压，AT进口",
      activityType: "普通转化活动",
      collected: false,
    },
    {
      id: 4,
      factor: 645.32448958,
      unit: "kgCO2e/unit",
      productName: "废旧电车",
      activityName: "二手车电场",
      activityType: "市场活动",
      collected: false,
    },
    // 更多数据...
  ]);

  // 评估项数据
  const evaluationItems = ref([
    {
      category: "可靠性（PAD）",
      type: "prospect",
      options: [
        { score: 1, label: "前景数据基于测量" },
        { score: 2, label: "前景数据部分基于假设或者未验证数据基于测量" },
        { score: 3, label: "前景数据部分基于合格的评估" },
        // 4-5分没有选项
      ],
    },
    {
      category: "时间代表性（TIRAD）",
      type: "prospect",
      options: [
        { score: 1, label: "前景数据收集年度与报告年度一致" },
        { score: 2, label: "前景数据是参考报告年度前2年的数据" },
        { score: 3, label: "前景数据是参考报告年度前3年以上的数据" },
        // 4-5分没有选项
      ],
    },
    {
      category: "时间代表性（TIRE）",
      type: "background",
      options: [
        { score: 1, label: "背景数据发布的日期在本报告数据集的有效期内" },
        { score: 2, label: "背景数据发布的日期不超过数据集有效期的2年" },
        { score: 3, label: "背景数据发布的日期不超过数据集有效期的4年" },
        { score: 4, label: "背景数据发布的日期不超过数据集有效期的6年" },
        {
          score: 5,
          label:
            "环境是数据发布的时间超过数据集有效期的6年，或是背景数据的发布的时间不详",
        },
      ],
    },
    {
      category: "技术代表性（TEREF）",
      type: "background",
      options: [
        { score: 1, label: "背景数据使用的技术与数据集范围内的技术完全相同" },
        { score: 2, label: "背景数据使用的技术包括在数据集范围内的技术组合中" },
        {
          score: 3,
          label: "背景数据使用的技术只有部分包括在数据集的范围内的技术组合中",
        },
        { score: 4, label: "背景数据使用的技术与数据集范围中使用的技术类似" },
        { score: 5, label: "背景数据使用的技术与数据集范围中使用的技术不同" },
      ],
    },
    {
      category: "地理代表性（GREF）",
      type: "background",
      options: [
        { score: 1, label: "背景数据来源于正在研究的区域（如中国）" },
        {
          score: 2,
          label: "背景数据来源于包括正在研究区域以外的更大区域（如亚洲）",
        },
        { score: 3, label: "背景数据来源正正在研究更小的区域或者相似区域" },
        { score: 4, label: "背景数据来源于有相似生产状况的区域充分的评估" },
        { score: 5, label: "背景数据来源于未知区域或者明显不同的区域" },
      ],
    },
  ]);
  // 材料表格数据
  const materialTableData = ref([
    {
      score: 1,
      PAD: "○ 前景数据基于测量",
      TRAD: "○ 前景数据收集在离场报告中一致",
      TREE: "背景数据发布的日期在本报告数据库的有效期内",
      TEREF: "背景数据使用的技术与数据集范围内的技术完全相同",
      GREF: "背景数据来源于正在研究的区域（如中国）",
    },
    {
      score: 2,
      PAD: "○ 前景数据的分布于假设或者未证实数据基于测量",
      TRAD: "○ 前景数据是参考报告在页面的文件的数据",
      TREE: "背景数据发布的日期不超过数据库有效期的2年",
      TEREF: "背景数据使用的技术包括在数据库范围内的技术组合中",
      GREF: "背景数据来源于包括正在研究区域以外的更大区域（如亚洲）",
    },
    {
      score: 3,
      PAD: "○ 前景数据部分基于合格的评估",
      TRAD: "○ 前景数据是参考报告在页面的文件以上的数据",
      TREE: "背景数据发布的日期不超过数据库有效期的4年",
      TEREF: "背景数据使用的技术只有部分包括在数据库的范围内的技术组合中",
      GREF: "背景数据来源比正在研究更小的区域或者相似区域",
    },
    {
      score: 4,
      PAD: "/",
      TRAD: "/",
      TREE: "背景数据发布的日期不超过数据库有效期的6年",
      TEREF: "背景数据使用的技术与数据集范围中使用的技术类似",
      GREF: "背景数据来源于有相似生产状况的区域充分的评估",
    },
    {
      score: 5,
      PAD: "/",
      TRAD: "/",
      TREE: "背景数据的发布的时间超过数据库有效期的6年，或是背景数据的发布的时间不详",
      TEREF: "背景数据使用的技术与数据集范围中使用的技术不同",
      GREF: "背景数据来源于未知道或查看相关不同的区域",
    },
  ]);

  const activeTab = ref("0");
  const formRefs = ref([]);
  const inputs = ref([
    {
      name: "使用1",
      emissionType: "database",
      factorName: "机械处理残留物、笔记本电脑",
      factorValue: 2.83725208,
      unit: "kgCO2e/kg",
      dataSource: "residue from mechanical treatment, laptop computer",
      consumption: 20,
      consumptionUnit: "kg",
    },
  ]);
  const outs = ref([
    {
      name: "运输1",
      factorValue: 3,
      consumption: 2,
      emissionType: "custom",
      unit: "kgCO2e/pieces（100pieces）",
      factorName: "22",
      dataSource: "企业自制",
      dataQuality: "",
    },
  ]);

  const rules = {
    name: [{ required: true, message: "请使用名称", trigger: "blur" }],
    emissionType: [
      { required: true, message: "请选择碳排放因子类别", trigger: "change" },
    ],
    factorName: [
      { required: true, message: "请输入影响因子名称", trigger: "blur" },
    ],
    factorValue: [
      { required: true, message: "请输入因子数值", trigger: "blur" },
    ],
    unit: [{ required: true, message: "请选择单位", trigger: "change" }],
    dataSource: [
      { required: true, message: "请输入数据来源", trigger: "blur" },
    ],
    consumption: [{ required: true, message: "请输入消耗量", trigger: "blur" }],
  };

  const addNewInput = () => {
    const newIndex = inputs.value.length;
    inputs.value.push({
      name: `使用${newIndex + 1}`,
      factorValue: 0,
      consumption: 0,
      emissionType: "",
      unit: "",
      factorName: "",
      dataSource: "",
      dataQuality: "",
    });
    activeTab.value = String(newIndex);
  };
  const addNewOut = () => {
    const newIndex = outs.value.length;
    outs.value.push({
      name: `运输${newIndex + 1}`,
      factorValue: 0,
      consumption: 0,
      emissionType: "",
      unit: "",
      factorName: "",
      dataSource: "",
      dataQuality: "",
    });
    activeOutTab.value = String(newIndex);
  };

  const handleTabClick = (tab) => {
    activeTab.value = tab.paneName;
  };

  const handleOutTabClick = (tab) => {
    activeOutTab.value = tab.paneName;
  };

  const removeTab = (targetName) => {
    //添加二次确认
    ElMessageBox.confirm(
      `确定要删除《${inputs.value[targetName].name}》吗?`,
      "提示",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }
    )
      .then(() => {
        const index = inputs.value.findIndex(
          (_, i) => String(i) === targetName
        );
        if (index !== -1) {
          inputs.value.splice(index, 1);
          // Switch to previous tab if current tab is removed
          if (activeTab.value === targetName) {
            activeTab.value = String(Math.max(0, index - 1));
          }
        }
        ElMessage({
          type: "success",
          message: "删除成功",
        });
      })
      .catch(() => {});
  };
  const removeOutTab = (targetName) => {
    //添加二次确认
    ElMessageBox.confirm(
      `确定要删除《${outs.value[targetName].name}》吗?`,
      "提示",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }
    )
      .then(() => {
        const index = outs.value.findIndex((_, i) => String(i) === targetName);
        if (index !== -1) {
          outs.value.splice(index, 1);
          // Switch to previous tab if current tab is removed
          if (activeOutTab.value === targetName) {
            activeOutTab.value = String(Math.max(0, index - 1));
          }
        }
        ElMessage({
          type: "success",
          message: "删除成功",
        });
      })
      .catch(() => {});
  };
  const handleShowQuality = () => {
    qualityDialog.visible = true;
    console.log("显示数据质量检测弹窗", qualityDialog.visible);
  };
  // 运输标签
  const activeTransportTab = ref("运输段1");

  // 添加运输按钮方法
  const addTransport = () => {
    // 添加运输逻辑
    console.log("添加新运输");
  };

  // 材料供应商表格数据
  const supplierTableData = ref([
    {
      supplierName: "广州昊天新材料",
      distance: "3300",
      transportMethod: "189",
      impactFactor: "运输、货运、卡车3.5-7.5公吨, EURO4",
      emissionTotal: "0 kgCO2e",
    },
  ]);
  const handleEmissionChange = (index, field, value) => {
    emissionVisible.value = true;
  };
  // 底部数据
  const bottomData = ref([
    {
      value: "0.5539",
      unit: "t",
      dataSource: "数据来源",
      dataQuality: "",
    },
  ]);
  //返回导航页面
  const goHome = () => {
    emit("goNav");
  };
  const filteredFactors = computed(() => {
    let factors = allFactors.value;

    // 数据源过滤
    if (dataFilter.value) {
      factors = factors.filter(
        (f) =>
          f.productName.includes(dataFilter.value) ||
          f.activityName.includes(dataFilter.value)
      );
    }

    // 常用因子过滤
    if (commonFilter.value) {
      factors = factors.filter(
        (f) =>
          f.productName.includes(commonFilter.value) ||
          f.activityName.includes(commonFilter.value)
      );
    }

    // 关键字搜索
    if (keyword.value) {
      factors = factors.filter(
        (f) =>
          f.productName.includes(keyword.value) ||
          f.activityName.includes(keyword.value) ||
          f.activityType.includes(keyword.value) ||
          f.unit.includes(keyword.value)
      );
    }

    // 收藏过滤
    if (showCollected.value) {
      factors = factors.filter((f) => f.collected);
    }

    // 分页处理
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return factors.slice(start, end);
  });
  const total = computed(() => allFactors.value.length);
  const processName = computed(() => {
    return carbonStore.getOperateMaterial();
  });
  const theme = computed(() => {
    return settingsStore.theme;
  });
</script>

<style lang="scss" scoped>
  .material-acquisition {
    padding: 20px;
    background-color: #fff;
    .go-home {
      position: absolute;
      top: 0;
      right: 0;
    }

    .cus-dialog {
      .option-item {
        margin: 8px 0;
      }

      .score {
        display: inline-block;
        width: 30px;
        font-weight: bold;
        color: #1cd1a1;
      }

      .option-text {
        margin-left: 10px;
      }

      .result-display {
        margin-top: 20px;
        padding: 15px;
        background-color: #f5f7fa;
        border-radius: 4px;
      }

      .result-display h4 {
        margin-bottom: 10px;
        color: #606266;
      }

      .result-display ul {
        list-style-type: none;
        padding-left: 0;
      }

      .result-display li {
        margin: 5px 0;
        color: #606266;
      }
    }
  }

  .step-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
  }

  .content-container {
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    padding: 20px;

    .form-content {
      padding: 20px;
    }

    .add-button {
      margin-top: 20px;
      text-align: right;
    }
    .bottom-btn {
      text-align: right;
      margin-top: 14px;
    }

    .emission-total {
      font-weight: bold;
      color: #409eff;
    }

    :deep(.el-tabs__item) {
      height: 40px;
      line-height: 40px;
      font-size: 14px;
    }

    :deep(.el-form-item__label) {
      font-weight: normal;
    }

    .carbon-card {
      background-color: var(--theme); /* 绿松石色/薄荷绿色背景 */
      //width: 320px;
      height: 120px;
      border-radius: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      position: relative;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .card-content {
      display: flex;
      flex-direction: column;
    }

    .title {
      font-size: 20px;
      color: white;
      margin-bottom: 10px;
      font-weight: 500;
    }

    .emission-value {
      font-size: 32px;
      color: white;
      margin-left: 25px;
      font-weight: 300; /* 较细的字体 */
      .num {
        font-size: 36px;
        font-weight: 500; /* 较粗的字体 */
      }
    }

    .document-icon {
      width: 24px;
      height: 24px;
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      right: 10px;
      top: 10px;
    }

    .document-icon svg {
      width: 14px;
      height: 14px;
    }
  }
  /*因子库弹窗*/
  ::v-deep .emission-factor-dialog {
    .pagination {
      display: flex;
      justify-content: flex-end;
      margin-top: 10px;
    }
  }

  .transport-tabs {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  }

  .add-transport-btn {
    margin-left: 15px;
    font-size: 14px;
    padding: 6px 12px;
  }

  .el-table {
    margin-top: 0;
  }

  .el-tag {
    margin-top: 5px;
  }
</style>
